import React from 'react'
import './style.css'
export interface IProgressProps {
    step?: number;
    total?: number;
    showInfo?: boolean;
    color?: string;
    width?: number;
    barWidth?: number;
    prefixCls?: string;/*更好的对组件样式定制 */
}
const ProgressBar: React.FC<IProgressProps> = (props) => {
    const {
        prefixCls,
        barWidth,
        step,
        total,
        showInfo,
        color,
        ...restProps
    } = props
    let percent,
        text,
        progressInfo,
        progress;
    // 封装
    const percentDeal = (step: number | undefined,
        total: number | undefined): number => {
        if (!step || !total) {
            return 0;
        }
        return (step / total) * 100;
    }
    const validProgress = (progress: number | undefined) => {
        if (!progress || progress < 0) {
            return 0;
        } else if (progress > 100) {
            return 100;
        }
        return progress;
    }
    const parseIntPercent = (text: number): string => `${Math.ceil(text)}%`;
    percent = percentDeal(step, total);
    text = parseIntPercent(validProgress(percent));
    const fixTipsStyle = {
        left: text
    }
    if (showInfo) {
        progressInfo = (
            <div className={`${prefixCls}-show-info`}>
                <span className={`${prefixCls}-text`}>{text}</span>
            </div>
        )
    }
    const percentStyle = {
        width: text,
        height: "12px",
        background: color,
        borderRadius: "100px"
    }
    const fixOuterStyle = {
        marginTop: "30px"
    }

    progress = (
        <div>
            <div className={`${prefixCls}-outer`} style={fixOuterStyle}>
                <div className={`${prefixCls}-inner`}>
                    <div className={`${prefixCls}-bg`} style={percentStyle}>
                        {progressInfo || null}
                    </div>
                </div>
            </div>
        </div>
    )

    return (
        <div {...restProps} className="tiger-progress">
            {progress}
        </div>
    )
}

export default ProgressBar